window.onload = function() {
  //init $
  window.$ = document.querySelector.bind(document);
  
  //get cookie
  chrome.storage.local.get('cookie', function(cookie){
    console.log(cookie.cookie);
    if(cookie.cookie){
      $('#email').value = cookie.cookie.email || '';
      $('#password').value = cookie.cookie.password  || '';
    }
  });
  
  
  //init ajax object
  window.ajax = new Request();
  
  //login
  $('#login-panel .submit').onclick = function(){
    var email = $('#email').value;
    var password = $('#password').value;
    var errdiv = $('#login-err');
    if(!email){
      errdiv.innerHTML = 'An email is required. System will create a tempory account if without password';
      errdiv.style.display = 'block';
    }else{
      errdiv.style.display = 'none';
      var data = email + '|||' + password;
      ajax.doPost("app/sl", data, function(response){
        var tasks = JSON.parse(response);
        if(tasks.length){
          for(var i=0; i<tasks.length; i++){
            var op = new Option(tasks[i].value, tasks[i].key);
            $('#tasks').appendChild(op);
          }
          
          //add cookie
          var cookie = {
              email: email,
              password: password
          };
          chrome.storage.local.set({'cookie': cookie});
          
          main();
        }else{
          errdiv.innerHTML = 'Incorrect password or ' + email + ' has been used';
          errdiv.style.display = 'block';
        }
      });
    }
  };
 
};


// invoked after login
var main = function(){
  $('#login-panel').style.display = 'none';
  $('#track-panel').style.display = 'block';
  
  //sync imamges every 0.5 hour
  var halfHour = 1000 * 60 * 30;
  var captureDB = new Table("img", "trakapi/screenshot", halfHour);
  var interval = 1000 * 60 * 15; // capture interval
  var scale = 0.7; // scale of images captured
  var capture = new Capture(captureDB, interval, scale);
  
  //sync times every 5 minutes
  var _5min = 1000 * 60 * 5;
  var hourDB = new Table("hour", "trakapi/hour", _5min);
  //sync comment every 1 minutes
  var _1min = 1000 * 60;
  var memo = new Table("memo", "trakapi/memo", _1min);
  var timer = new Timer(capture, hourDB, memo);
  
  
  $('#startBtn').onclick = function(){
    timer.startOrStop();
  };
  
  var view = $("#view");
  var editor = $("#editor");
  var textarea = $("#editor textarea");
  
  view.onclick = function(){
    this.style.display = 'none';
    editor.style.display = 'block';
    textarea.value = view.textContent;
  };
  
  $('#savecomment').onclick = function(){
    view.textContent = textarea.value;
    timer.updateMemo(new Date().getTime());
    
    view.style.display = 'block';
    editor.style.display = 'none';
  };
  $('#cancelcomment').onclick = function(){
    view.style.display = 'block';
    editor.style.display = 'none';
  };
  
  var showToken = function(token){
    var url = ajax.urlPrefix + 'track/' + token;
    var a = $('#service-url>a');
    a.href = url;
    a.textContent = url;
  };
  
  ajax.doGet("app/token?taskId=" + $('#tasks').value, function(token){
    showToken(token);
  },null, 'text/plain');
  
  $('#service-url>button').onclick = function(){
    ajax.doGet("app/gen_token?taskId=" + $('#tasks').value, function(token){
      showToken(token);
    },null, 'text/plain');
  };
  
  $('#tasks').onchange = function(){
    ajax.doGet("app/token?taskId=" + $('#tasks').value, function(token){
      showToken(token);
    },null, 'text/plain');
  };
};
